<template>
  <t-card :title="$t('pages.dashboardBase.article.title')" :bordered="false">
    <div id="articleContainer" class="chart-container" />
  </t-card>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts/core';
import { computed, nextTick, onDeactivated, watch } from 'vue';

import { useSettingStore } from '@/store';

import { getLineChartDataSet } from '../index';

const store = useSettingStore();

const chartColors = computed(() => store.chartColors);

let articleContainer: HTMLElement;
let monitorChart: echarts.ECharts;
const renderMonitorChart = (xData: any[], yData: any[]) => {
  if (!articleContainer) {
    articleContainer = document.getElementById('articleContainer');
  }
  monitorChart = echarts.init(articleContainer);
  monitorChart.setOption(getLineChartDataSet({ ...chartColors.value, xData, yData }));
};

// chartSize update
const updateContainer = () => {
  monitorChart.resize({
    width: articleContainer.clientWidth,
  });
};

const storeModeWatch = watch(
  () => store.mode,
  () => {
    monitorChart.dispose();

    updateContainer();
  }
);

onDeactivated(() => {
  storeModeWatch();
});

const render = (xData: any[], yData: any[]) => {
  renderMonitorChart(xData, yData);
  nextTick(() => {
    updateContainer();
  });
};

defineExpose({
  render,
});
</script>

<style lang="less" scoped>
.chart-container {
  height: 326px;
}
.t-card {
  :deep(.t-card__body) {
    padding-top: 0;
  }
}
</style>
